<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车-小米商城</title>
    <link rel="stylesheet" href="css/cart.css">
    <link rel="stylesheet" href="css/layout.css">
    <script src="../jquery.js"></script>
    <script src="js/cart-wrap.js"></script>
    <script src="js/cart-recommend.js"></script>
    <link rel="shortcut icon" href=" ../bitbug_favicon.ico" />
    <link rel="stylesheet" href="http://localhost/mi/Home/iconfont/iconfont.css">
    <link rel="stylesheet" href="../footer/footer.css">


</head>

<body>
    <div>
        <!-- 添加注释 -->
        <div class="header">
            <div class="main">
                <div class="header-logo">
                    <a href="../Home/Home.html" class="logo" title="小米官网"></a>
                </div>
                <div class="header-title">
                    <h2>我的购物车</h2>
                    <p class="header-tips">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
                </div>
                <div class="header-r">
                    <a href="http://localhost/mi/login/login.html">登录</a>
                    <span>|</span>
                    <a href="http://localhost/mi/login/login.html">注册</a>
                </div>
            </div>
        </div>
        <!-- 头部 -->
        <div class="wrap">
            <div class="main">
                <div class="empty-cart-top">
                    <h2 class="login-tip is-login">您的购物车还是空的！</h2>
                    <p class="login-desc">登录后将显示您之前加入的商品</p>
                    <a href="http://localhost/mi/login/login.html" class="btn-login">立即登录</a>
                    <a href="http://localhost/mi/list/list.html" class="btn-primary">马上去购物</a>
                </div>
                <div class="cart-top">
                    <div class="cart-wrap">
                        <div class="cart-tips">
                            <!-- 凑包邮区域 -->
                        </div>
                        <div class="cart-list">
                            <div class="list-head">
                                <div class="col-check"><input class="checkAll" type="checkbox">全选</div>
                                <div class="col-img">&nbsp;</div>
                                <div class="col-name">商品名称</div>
                                <div class="col-price">单价</div>
                                <div class="col-num">数量</div>
                                <div class="col-total">小计</div>
                                <div class="col-action">操作</div>
                            </div>
                            <div class="item-box">
                                <table>
                                    <!-- js动态渲染 -->
                                </table>
                            </div>
                        </div>
                    </div>

                    <div style="margin: 20px 0;"></div>
                    <div class="cart-fooder">
                        <div class="cart-fooder-l">
                            <a href="http://localhost/mi/Home/Home.html">继续购物</a>
                            <span class="cart-total">共 <i>0</i> 件商品，已选择 <i>0</i> 件</span>
                        </div>
                        <div class="cart-fooder-r">
                            <span>合计：<i>0</i>元<a class="total" href="javascript:;">去结算</a></span>
                        </div>
                    </div>
                </div>
                <!-- cart -->

                <div style="margin: 60px 0 0;"></div>
                <div class="cart-recommend">
                    <h2><span>买购物车中商品的人还买了</span></h2>
                    <div>
                        <ul class="clearfix">
                            <!-- js动态渲染 -->
                        </ul>
                    </div>
                </div>
                <!-- 买购物车中商品的人还买了 -->
            </div>
        </div>
    </div>
    <div class="fooder" style="background-color: white;">

    </div>
    <div class="mi-popup">
        <div class="mi-popup-bg"></div>
        <div class="mi-dialog">
            <div class="mi-dialog-top">
                <a href="javascript:;" class="close"><span>x</span></a>
                <p>确认删除所选商品吗？</p>
            </div>
            <div class="mi-dialog-bon">
                <button class="btn-primary">确定</button>
                <button class="btn-gray">取消</button>
            </div>
        </div>
    </div>

    <script>
        $('.fooder').load('../footer/footer.html', function () {
            // load是ajax的异步操作
            // 加载完成后的回调函数
        });
    </script>
</body>

</html>